<!DOCTYPE html>
<html>
<head>
  <title></title>

  <script type="text/javascript" src="javascripts/lib/pixi/pixi.js"></script>

</head>
<body>

<script type="text/javascript">
  // 1. 初始化一个app，并将view添加到body中
  var app = new PIXI.Application(800, 450, {
    backgroundColor: 0x000000
  });
  document.body.appendChild(app.view);

  var stage = app.stage;
  var screen = app.screen;

  // 设置缩放模式
  // NEAREST 像素风格
  // LINEAR 模糊风格
  PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.LINEAR;

  // 2. 创建精灵，并添加到app的stage
  // sprite
  var bg = new PIXI.Sprite.fromImage('images/hotel.png');
  bg.width = screen.width;
  bg.height = screen.height;
  stage.addChild(bg);

  // sprite player
  var player = new PIXI.Sprite.fromImage('images/goblin.png');
  player.anchor.set(0.5);
  player.position.set(screen.width / 2, screen.height - 50);
  player.scale.x = 1;
  player.scale.y = 1;
  player.alpha = 1;
  stage.addChild(player);

  // 3. app会自动进行帧动画刷新；

  // 4. 写一个定时器玩玩
  app.ticker.add(function (delta) {
    // 以60fps的速度刷新
    // 当一帧完成度是100%时，delta是1；delta是基于60fps的百分比；
    player.rotation += 0.01 * delta;
  });

</script>

</body>
</html>